<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f0eff5;
        }

        .h10 {
            height: 10px;
            background: #f0f0f0;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="aui-refresh-content" style="min-height:100vh;">
            <div class="aui-content aui-margin-b-15 ">
                <ul class="aui-list aui-media-list">
                    <li class="h10">

                    </li>

                    <li class="aui-list-item aui-list-item-middle" v-for='(item,index) in infoList' v-on:click="openDetails(item.targetId,item.nickname,item.conversationType,index)">
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media" style="width: 3rem;">
                                <img :src="item.headImg" v-if="item.headImg" class="aui-img-round aui-list-img-sm">
                                <img src="../../image/wdr@3x.png" v-else class="aui-img-round aui-list-img-sm">
                                <div class="aui-badge" v-show="item.unreadMessageCount > 0">{{item.unreadMessageCount}}</div>
                            </div>
                            <div class="aui-list-item-inner aui-list-item-arrow">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title aui-font-size-14">{{item.nickname}}</div>
                                    <div class="aui-list-item-right">{{item.sentTime | time}}</div>
                                </div>

                                <div class="aui-list-item-text">

                                    <!-- 循环遍历后得到的消息列表 -->
                                    <span v-if="item.latestMessage" style="height:1rem;line-height:1rem;overflow:hidden;">

                                      <!-- 消息类型的判断 -->
                                      <div v-if="item.objectName=='RC:TxtMsg' && item.latestMessage.text.indexOf('图片')!=-1">[图片]</div>
                                      <div v-else-if="item.objectName=='RC:TxtMsg' && item.latestMessage.text.indexOf(';')==-1" v-html="item.latestMessage.text"></div>
                                      <div v-else-if="item.objectName=='RC:TxtMsg'" v-html="item.latestMessage.text"></div>
                                      <div v-else-if="item.objectName=='RC:VcMsg'" >[语音]</div>

                                    </span>

                                    <!-- 新收到的消息 -->
                                    <span v-else-if="item.content" style="height:1rem;line-height:1rem;overflow:hidden;">
                                      <!-- 消息类型的判断 -->
                                      <div v-if="item.objectName=='RC:TxtMsg'">
                                          <div v-if="item.content.text.indexOf('图片')==-1" v-html="item.content.text"></div>
                                          <div v-else>[图片]</div>
                                      </div>
                                      <div v-else-if="item.objectName=='RC:VcMsg'">[语音]</div>
                                      <!-- <div v-else="item.objectName=='RC:TxtMsg' && item.content.text.indexOf(';')==-1" v-html="item.content.text"></div> -->


                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>

<script type="text/javascript">
    var rong;
    var test_token;
    apiready = function() {

        if (!$api.getStorage('token')) {
            api.toast({
                msg: '用户未登录',
                duration: 2000,
                location: 'middle'
            });
            return
        }


        rong = api.require('rongCloud2');
        //初始化
        rong.init(function(ret, err) {
            if (ret.status == 'success') {
                var app = new Vue({
                    el: '#app',
                    data: {
                        infoList: [],
                        sendUserInfo: [{
                            userId: 0,
                            username: '',
                            portrait: ''
                        }],
                        page: 1,
                        totalpage: 0
                    },
                    filters: {
                        time: function time(val) {
                            var nowDate = new Date()
                            var nowYear = nowDate.getFullYear()
                            var nowMonth = nowDate.getMonth()
                            var nowDay = nowDate.getDate()
                            var nowWeek = nowDate.getDay()
                            var nowHour = nowDate.getHours()
                            var nowMinutes = nowDate.getMinutes()
                            var nowSeconds = nowDate.getSeconds()

                            var date = new Date(val)
                            var year = date.getFullYear()
                            var month = date.getMonth()
                            var day = date.getDate()
                            var week = date.getDay()
                            var hour = date.getHours()
                            var minutes = date.getMinutes()
                            var seconds = date.getSeconds()

                            if (nowYear > year) {
                                return year + '-' + (month + 1) + '-' + day
                            } else if (nowMonth > month) {
                                return (month + 1) + '-' + day
                            } else if (nowDay > day) {
                                if (nowDay - day < 7) {
                                    return (nowDay - day) + '天前'
                                } else {
                                    return (month + 1) + '-' + day
                                }
                            } else if (nowHour > hour) {
                                return hour + ':' + minutes
                            } else if (nowMinutes > minutes) {
                                return (nowMinutes - minutes) + '分钟前'
                            } else {
                                return '刚刚'
                            }
                        }

                    },
                    created: function() {
                        var $_this = this

                        var userInfo = $api.getStorage('data');
                        var data = {
                            userid: userInfo.userid,
                            username: userInfo.nickname,
                            portrait: userInfo.headImg
                        }
                        if (ret) {
                            //监听收到的消息
                            rong.setOnReceiveMessageListener(function(ret, err) {

                                console.log('消息列表页刚收到的消息------' + JSON.stringify(ret.result.message));

                                // 收到消息后执行index 页面的获取消息总数方法
                                api.execScript({
                                    name: 'root',
                                    script: 'get_alll_msg();'
                                });


                                var on_off = false;
                                var targetId_index;
                                for (var i = 0; i < $_this.infoList.length; i++) {
                                    // 如果存在id
                                    if (ret.result.message.targetId != $_this.infoList[i].targetId) {
                                        on_off = true;
                                    } else {
                                        on_off = false;
                                        targetId_index = i;
                                        break;
                                    }
                                }
                                var unreadMessageCount = 0;
                                if ($_this.infoList[targetId_index]) {
                                    unreadMessageCount = $_this.infoList[targetId_index].unreadMessageCount;
                                }
                                if (on_off) {
                                    $_this.infoList.push(ret.result.message);
                                    api.ajax({
                                        url: window.Url.getOthorUser + $_this.infoList[targetId_index].targetId,
                                        timeout: 300,
                                        method: 'get', // 提交类型
                                        cache: 'false', // 是否缓存
                                        dataType: 'json', // 返回数据     json 或 text
                                    }, function(ret, err) {
                                        if (ret) {
                                            // console.log(JSON.stringify(ret));
                                            $_this.infoList[targetId_index].nickname = ret.data.nickname;
                                            $_this.infoList[targetId_index].headImg = ret.data.headImg;
                                            $_this.infoList = $_this.infoList.concat([])

                                        } else {
                                            // alert( JSON.stringify( err ) );
                                        }
                                    });

                                } else {

                                    $_this.$set($_this.infoList, targetId_index, ret.result.message);
                                    $_this.$set($_this.infoList[targetId_index], 'unreadMessageCount', unreadMessageCount + 1);
                                    unreadMessageCount = $_this.infoList[targetId_index].unreadMessageCount;

                                    api.ajax({
                                        url: window.Url.getOthorUser + $_this.infoList[targetId_index].targetId,
                                        timeout: 300,
                                        method: 'get', // 提交类型
                                        cache: 'false', // 是否缓存
                                        dataType: 'json', // 返回数据     json 或 text
                                    }, function(ret, err) {
                                        if (ret) {
                                            // console.log(JSON.stringify(ret));
                                            $_this.infoList[targetId_index].nickname = ret.data.nickname;
                                            $_this.infoList[targetId_index].headImg = ret.data.headImg;
                                            $_this.infoList = $_this.infoList.concat([])

                                        } else {
                                            // alert( JSON.stringify( err ) );
                                        }
                                    });
                                }

                                //获取当前用户所有未读消息的总数
                                rong.getTotalUnreadCount(function(ret, err) {
                                    console.log('消息列表页面刚收到消息获取到的未读消息总数---' + ret.result)
                                    api.sendEvent({
                                        name: 'send_info_num',
                                        extra: {
                                            msg_num: ret.result
                                        }
                                    });
                                })


                            })




                            // 连接融云
                            rong.connect({
                                token: $api.getStorage('rong-token')

                            }, function(ret, err) {

                                if (ret.status == 'success') {

                                    // //获取会话列表
                                    rong.getConversationList(function(ret, err) {
                                        if (ret.result == null) {
                                            api.toast({
                                                msg: '暂无消息',
                                                duration: 2000,
                                                location: 'middle'
                                            });
                                        }
                                        $_this.infoList = ret.result;

                                        // 请求对方的信息数据
                                        for (var j = 0; j < ret.result.length; j++) {

                                            (function() {
                                                var x = j;
                                                api.ajax({
                                                    url: window.Url.getOthorUser + ret.result[x].targetId,
                                                    timeout: 300,
                                                    method: 'get', // 提交类型
                                                    cache: 'false', // 是否缓存
                                                    dataType: 'json', // 返回数据     json 或 text
                                                }, function(ret, err) {
                                                    if (ret) {
                                                        $_this.infoList[x].nickname = ret.data.nickname;
                                                        $_this.infoList[x].headImg = ret.data.headImg;
                                                        $_this.infoList = $_this.infoList.concat([])

                                                    } else {
                                                        // alert( JSON.stringify( err ) );
                                                    }
                                                });

                                            })()

                                        }
                                        console.log('消息列表页获取消息列表成功' + JSON.stringify(ret.result));
                                    })



                                    //获取当前用户所有未读消息的总数
                                    rong.getTotalUnreadCount(function(ret, err) {
                                        console.log('消息列表页面获取到的未读消息总数---' + ret.result)
                                        api.sendEvent({
                                            name: 'send_info_num',
                                            extra: {
                                                msg_num: ret.result
                                            }
                                        });
                                    })



                                    //下拉刷新
                                    var pullRefresh = new auiPullToRefresh({
                                        container: document.querySelector('.aui-refresh-content'),
                                        triggerDistance: 100
                                    }, function(ret) {

                                        // //获取会话列表
                                        rong.getConversationList(function(ret, err) {
                                            $_this.infoList = ret.result;

                                            // 请求对方的信息数据
                                            for (var j = 0; j < ret.result.length; j++) {

                                                (function() {
                                                    var x = j;
                                                    api.ajax({
                                                        url: window.Url.getOthorUser + ret.result[x].targetId,
                                                        timeout: 300,
                                                        method: 'get', // 提交类型
                                                        cache: 'false', // 是否缓存
                                                        dataType: 'json', // 返回数据     json 或 text
                                                    }, function(ret, err) {
                                                        if (ret) {
                                                            $_this.infoList[x].nickname = ret.data.nickname;
                                                            $_this.infoList[x].headImg = ret.data.headImg;
                                                            $_this.infoList = $_this.infoList.concat([])

                                                        } else {
                                                            // alert( JSON.stringify( err ) );
                                                        }
                                                    });

                                                })()

                                            }

                                            //获取当前用户所有未读消息的总数
                                            rong.getTotalUnreadCount(function(ret, err) {
                                                console.log('消息列表页面刷新后获取到的未读消息总数---' + ret.result)

                                                // 刷新消息列表后 页面的获取消息总数方法
                                                api.execScript({
                                                    name: 'root',
                                                    script: 'get_alll_msg();'
                                                });


                                                api.sendEvent({
                                                    name: 'send_info_num',
                                                    extra: {
                                                        msg_num: ret.result
                                                    }
                                                });
                                            })
                                        })

                                        if (ret.status == "success") {
                                            setTimeout(function() {
                                                pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                                            }, 1500)
                                        }
                                    })

                                } else {
                                    console.log('用户信息---- 获取聊天列表失败了' + JSON.stringify(err));
                                }
                            })


                        } else {

                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }

                    },
                    methods: {
                        openDetails: function(id, title, type, index) {

                            var $_this = this;
                            $_this.$set($_this.infoList[index], 'unreadMessageCount', 0);

                            api.openWin({
                                name: 'user_info_' + id,
                                url: './user_info_details_win.html',
                                pageParam: {
                                    id: id,
                                    name: title,
                                    chat_type: type,
                                },
                                bgColor: '#fff'
                            });
                        }
                    }
                })

            } else {
                api.toast({
                    msg: err.code
                });
            }
        });


    }
</script>

<script src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    function reload_frm(){
      window.location.href = window.location.href;
    }



</script>

</html>
